<template>
	<view>
	
		<view class="u-flex user-box u-p-l-30 u-p-t-20 u-p-r-20 u-p-b-30">
			<view class="u-m-r-22">
				<ossUploadPic></ossUploadPic>				
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{name}}</view>
				<view class="u-font-14 u-tips-color">邮箱:{{email}}</view>
			</view>
			<!-- <view class="u-m-l-10 u-p-10">
				<u-icon name="scan" color="#969799" size="28"></u-icon>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view> -->
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell icon="setting" title="个人信息" :isLink="true" url="./baseinfo"></u-cell>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell icon="rmb-circle" title="我的订单" :isLink="true"></u-cell>
				<u-cell icon="star" title="商品收藏" :isLink="true"></u-cell>
				<u-cell icon="map" title="收货地址" :isLink="true" url="/pages/cart/address"></u-cell>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell icon="reload" title="退出登录" :isLink="true" @click="logout"></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				name:'',
				email:''
			}
		},
		onLoad() {
			_this = this;
			if (!uni.$u.utils.isLogin()) {
				return;
			}		
		},
		onShow() {
			const userinfo = uni.getStorageSync('userinfo');
			_this.pic = userinfo.avatar_url;
			_this.name = userinfo.name;
			_this.email = userinfo.email;
		},
		methods: {
			async logout(){
				const access_token = uni.getStorageSync('access_token');
				await uni.$u.http.post('api/auth/logout',{},{header:{Authorization:'bearer ' + access_token}});
				uni.$u.toast('注销成功');
				uni.setStorageSync('access_token','');
				uni.setStorageSync('userinfo',{});
				setTimeout(()=>{
					uni.$u.route({
						type:'reLaunch',
						url:'pages/index/index'
					})
				},1500)
			}
		}
	}
</script>

<style lang="scss">
	.u-cell{background-color: white;}
	page {
		background-color: #ededed;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}
</style>
